<template>
    <!--最大div-->
    <div style="margin-top: -10px">
        <!--新建栏-->
        <div style="box-shadow:#ccc 0px 0px 10px;border:1px solid #BFBFBF;padding: 10px;background-color: white;margin-top: 10px;height: 40px">
            <el-row :gutter="24">
                <el-col :span="2">
                    <span style="font-size: 18px;line-height:40px;margin-left: 5px">销售机会</span>
                </el-col>
                <el-col :span="8">

                    <el-row>
                        <el-col :span="10">
                            <el-select v-model="busphaseoptions" value-key="phaseName" @change="changebusni" style="width: 150px;margin-left: 10px" placeholder="全部商机">
                                <el-option
                                        v-for="item in phaseoptions"
                                        :key="item.phaseId"
                                        :label="item.phaseName"
                                        :value="item">
                                </el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="3">
                            <el-button style="background-color: #F05050;color: white;margin-left: 10px;" @click="cancelseek" icon="el-icon-circle-close" v-show="seek" size="mini" round></el-button>
                        </el-col>
                        <el-col :span="4">
                            <el-select style="width: 150px;margin-left: 10px" v-model="prosss" @change="mybusdatachange"
                                       placeholder="请选择">
                                <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item">
                                </el-option>
                            </el-select>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span="8">
                    <el-input placeholder="商机编号/商机名称/客户名称" @keyup.enter.native="selectbusname1"  @blur="selectbusname1" v-model="busnameinput" style="width: 250px;">
                        <i slot="suffix" class="el-input__icon el-icon-search" @click="selectbusname"></i>
                    </el-input>
                </el-col>
                <el-col :span="5">
                    <el-button size="small" v-if="mybutton.indexOf('bus_golend')>-1"  type="primary" @click="batchAllExportExcelBefore">全部导出Excel</el-button>
                    <el-button size="small" v-if="mybutton.indexOf('bus_add')>-1" type="primary" @click="addbus">新建商机</el-button>
                </el-col>
                <el-col :span="1">
                    <i @click="showtablecol" style="margin-top: 10px" class="el-icon-s-grid"/>
                </el-col>
            </el-row>
        </div>

        <!--表格数据框-->
        <div style="box-shadow:#ccc 0px 0px 10px;margin-top: 10px;border: 1px solid #BFBFBF;background-color: white">
            <div style="width: 100%;height: 40px;background-color: white;border-bottom: 1px solid #EBEEF5">
                <div class="operate" v-show="cjy">
                    <div class="selected—title" style="border-right: 0px ">
                        场景：<span>{{cjname}}</span>
                    </div>
                </div>
                <div class="operate" v-show="cje">
                    <div class="selected—title" >
                        已选中<span class="selected—count">{{count}}</span>项
                    </div>
                    <div  class="selected—title1" v-show="isOne">
                        <span @click="topedit" v-if="mybutton.indexOf('bus_add')>-1"><i class="el-icon-edit"></i>修改</span>
                    </div>
                    <div @click="truedetbus"  class="selected—title1">
                        <span><i class="el-icon-delete"></i>删除</span>
                    </div>
                    <div @click="batchExportExcelBefore" class="selected—title1">
                        <span><i class="el-icon-sort"></i>导出</span>
                    </div>
                </div>
            </div>
            <el-table
                     ref="bustableData"
                    :data="bustableData"
                    style="width: 100%"
                    height="430"
                    :default-sort = "{prop: 'date', order: 'descending'}"
                    @selection-change="handleSelectionChange">
                <el-table-column
                        type="selection"
                        prop="busId"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="busNo"
                        label="商机编号"
                        sortable
                        v-if="colData[0].istrue"
                        width="200px"
                        align="center">
                </el-table-column>
                <el-table-column
                        label="商机名称"
                        sortable
                        v-if="colData[1].istrue"
                        align="center">
                    <template slot-scope="sp">
                        <!--按钮控制，查询是否保存此按钮标识符-->
                        <a v-html="sp.row.busName" v-if="mybutton.indexOf('bus_details')>-1" class="businame" @click="todetails(sp.row)"></a>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="client.clientName"
                        label="客户名称"
                        v-if="colData[2].istrue"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="client.clientSite"
                        label="客户地址"
                        v-if="colData[3].istrue"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="busPrimarycontact.linkmanName"
                        label="客户联系人"
                        v-if="colData[4].istrue"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="busPrimarycontact.linkmanMobile"
                        label="联系号码"
                        v-if="colData[5].istrue"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="busPossibility"
                        label="可能性"
                        v-if="colData[6].istrue"
                        align="center">
                </el-table-column>
                <el-table-column
                        label="预签单日期"
                        align="center"
                        v-if="colData[7].istrue"
                        sortable>
                    <template slot-scope="d">
                        {{d.row.busWritten | formatDate}}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="busMoney"
                        label="预期金额"
                        align="center"
                        v-if="colData[8].istrue"
                        sortable>
                    <template slot-scope="sp">
                        {{sp.row.busMoney|formatMoney}}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="busPeople"
                        label="负责人"
                        v-if="colData[9].istrue"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="phase.phaseName"
                        label="阶段"
                        v-if="colData[10].istrue"
                        align="center">
                </el-table-column>
                <el-table-column
                        label="建立时间"
                        sortable
                        v-if="colData[11].istrue"
                        align="center">
                    <template slot-scope="d">
                        {{d.row.busSettime | formatDate}}
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作"
                        align="center">
                    <template slot-scope="d">
                        <!--如果是三个标签，后两个标签padding-left: 10px;-->
                        <i v-if="d.row.phase.phaseName!='签单'" @click="editbus(d.row.busId)" style="font-size:18px;color: #409EFF" class="el-icon-edit"></i>
                        <i @click="detbus(d.row)" style="font-size:18px;padding-left: 20px;color: #409EFF" class="el-icon-delete"></i>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!--分页框-->
        <div style="box-shadow:#ccc 0px 0px 10px;margin-top: 15px;border: 1px solid #BFBFBF;padding: 10px;background-color: white">
            <div style="text-align: center">
            <el-pagination
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange"
                    :current-page="currentPage"
                    :page-sizes="sizes"
                    :page-size="pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagetotal"
            >
            </el-pagination>
            </div>
        </div>


        <!--动态选择表格列-->
        <el-dialog width="800px"  :before-close="handleDialogClose" center :close-on-click-modal=false style="text-align: left" title="选择表格列" :visible.sync="jilutankuan">
            <div style="height:230px;margin-left: 25px;margin-top: 20px" >
                <el-row>
                    <el-col :span="2">
                        <span>选择：</span>
                    </el-col>
                    <el-col :span="22">
                        <el-checkbox-group v-model="colOptions">
                            <el-checkbox v-for="item in colSelect"
                                         :label="item"
                                         :disabled="item=='商机名称' || item=='商机编号' || item=='客户名称'"
                                         :key="item">
                                <span>{{item}}</span>
                            </el-checkbox>
                        </el-checkbox-group>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 60px">
                    <el-col :span="2">
                        <span>注意：</span>
                    </el-col>
                    <el-col :span="11">
                        <span>选择列最多不超过八列，最少不低于五列</span>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col style="margin-left: 540px;margin-top: 50px">
                        <span>已选择：</span>
                        <span>{{colcount}}</span>
                        <span>列</span>
                    </el-col>
                </el-row>
            </div>
            <div style="width: 170px;margin-top: 5px;margin-left: 560px;">
                <el-button type="primary" @click="savetablecol">保存</el-button>
                <el-button @click="distablecol" class="el-icon-back">返回</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>

    import {formatTimeToStr} from '../router//format.js'
    import Crypto  from '../router//secret.js'
    export default {
        name: "Dbusiness",
        inject: ['reload'], // 引入方法
        data() {
            return {
                prosss:{
                    value: '1',
                    label: '我的商机'
                },
                options: [{
                    value: '1',
                    label: '我的商机'
                }, {
                    value: '2',
                    label: '可查看商机'
                }],
                mybutton:[],//存储按钮标识符

                colsize:7,//记录前一次表格列是多少个
                colarr:[],//记录前一次的表格列是哪些

                /*选择表格列弹框*/
                jilutankuan:false,
                /*表格列数据*/
                colSelect: [
                    "商机编号","商机名称","客户名称","客户地址","客户联系人",
                    "联系号码","可能性","预签单日期","预期金额","负责人","阶段",
                    "建立时间"
                ],//选项
                colOptions: [
                    "商机编号","商机名称","客户名称","客户联系人","联系号码","负责人","阶段",
                ], //默认选择

                /*动态显示表格列*/
                colData:[
                    {title: "商机编号",istrue: true},
                    {title: "商机名称",istrue: true},
                    {title: "客户名称",istrue: true},
                    {title: "客户地址",istrue: false},
                    {title: "客户联系人",istrue: true},
                    {title: "联系号码",istrue: false},
                    {title: "可能性",istrue: false},
                    {title: "预签单日期",istrue: false},
                    {title: "预期金额",istrue: false},
                    {title: "负责人",istrue: true},
                    {title: "阶段",istrue: true},
                    {title: "建立时间",istrue: false},
                ],

                /*商机列表表头信息*/
                tableInfo:[
                    {name:'商机编号',
                        value:'busNo',},
                    {name:'商机名称',
                        value:'busName',},
                    {name:'客户名称',
                        value:'clientName'},
                    {name:'客户地址',
                        value:'clientSite'},
                    {name:'客户联系人',
                        value:'linkmanName',},
                    {name:'联系号码',
                        value:'linkmanMobile'},
                    {name:'可能性',
                        value:'busPossibility',},
                    {name:'预签单日期',
                        value:'busWritten',},
                    {name:'预期金额',
                        value:'busMoney',},
                    {name:'负责人',
                        value:'busPeople',},
                    {name:'阶段',
                        value:'phaseName',},
                    {name:'建立时间',
                        value:'busSettime',},
                ],


                /*导出所有商机数据*/
                buslist:[],
                /*导出批量数据*/
                batchList:[],

                detflag:false,//判断删除商机是否有合同

                //商机阶段下拉框
                busphaseoptions:{
                    phaseId:0,
                    phaseName:'',
                },//绑定选择model
                phaseoptions: [],//初始化数据
                cjname:'',//绑定场景数据
                /*分页数据*/
                pagesize:8,//页大小
                currentPage:1,//当前页
                pagetotal:0,//总页数
                sizes:[5,8,10,12],//每页数据条



                multipleTable: [],//存放选中值的数组
                isOne:true,//选中项为1就出现添加跟进记录和修改
                //解除搜索是否显示
                seek:false,

                //场景一
                cjy:true,
                //场景二
                cje:false,
                //搜索框
                input23: '',
                //表格
                bustableData: [],


                busnameinput:'',//商机搜索框数据
            }
        },
        methods: {

            /*我的商机数据切换*/
            mybusdatachange(){//我的数据
                this.currentPage = 1;
                this.pagesize = 8;
                if(this.prosss.value == 1) {
                    this.init();
                }else{//我可查看数据
                    this.allbusiness();
                }

                this.multipleTable=[]//清空复选框
            },

            /**
             * 点击 自定义表格列 关闭对话框的回调
             **/
            handleDialogClose() {
                this.distablecol();
            },


            /*表格与选择列呼应方法*/
            arrcol(valArr){
                var arr = this.colSelect.filter(i => valArr.indexOf(i) < 0); // 未选中
                this.colData.filter(i => {
                    if (arr.indexOf(i.title) != -1) {
                        i.istrue = false;
                    } else {
                        i.istrue = true;
                    }
                });
            },

            /*选择列保存方法*/
            savetablecol(){
                window.console.log(this.colOptions.length);
                if(this.colOptions.length>8){
                    this.$message({
                        showClose: true,
                        message: '选择列超过八条！',
                        type: 'warning'
                    });
                }else if(this.colOptions.length<5){
                    this.$message({
                        showClose: true,
                        message: '选择列低于五条！',
                        type: 'warning'
                    });
                }else {
                    this.jilutankuan=false;
                    this.arrcol(this.colOptions);
                }
            },

            /*选择列返回放法*/
            distablecol(){
                if(this.colsize!=this.colOptions.length){
                    this.$confirm('此操作将未保存, 是否返回?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        var a = this.colOptions.length-this.colsize;
                        window.console.log(a);
                        if(a>0){
                            for(var i=this.colOptions.length-1;i>=this.colsize;i--) {
                                this.colOptions.splice(i, 1);
                            }
                        }else{
                            this.colOptions = this.colarr;
                        }

                        this.jilutankuan=false;
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消'
                        });
                    });
                }else{
                    this.jilutankuan=false;
                }
            },


            /*编辑显示表格列*/
            showtablecol(){
                this.jilutankuan=true;
                this.colsize = this.colOptions.length;
                this.colarr = this.colOptions;
            },

            /*编辑商机方法*/
            editbus(busId){
                busId = escape(Crypto.set(busId)); // 加密数据
                this.$router.push({
                    path: "/addbusniess",
                    query:{
                        busId:busId,
                    }
                });

            },


            /*初始化阶段*/
            inphase(){
                this.$axios.post("http://localhost:8088/business/phase").then(v=>{
                    window.console.log(v.data);
                    this.phaseoptions=v.data;
                }).catch(()=>{

                })
            },
            /*初始化我的商机列表*/
            init(){
                this.$axios.post("http://localhost:8088/business/mybusiness",this.qs.stringify(
                {currentPage:this.currentPage,pagesize:this.pagesize
                    ,busName:this.busnameinput, phaseName:this.cjname}
                )).then(v=>{

                    this.bustableData=v.data.rows;
                    this.buslist=v.data.buslist;
                    this.pagetotal = v.data.total;

                    /*储存负责人*/
                    var storage = window.localStorage;
                    storage.setItem('busPeople',escape(Crypto.set(v.data.rows[0].busPeople)));

                }).catch(()=>{

                });

            },

            /*我可查看的商机*/
            allbusiness(){
                this.$axios.post("http://localhost:8088/business/allbusiness",this.qs.stringify(
                    {currentPage:this.currentPage,pagesize:this.pagesize
                        ,busName:this.busnameinput, phaseName:this.cjname}
                )).then(v=>{

                    this.bustableData=v.data.rows;
                    this.buslist=v.data.buslist;
                    this.pagetotal = v.data.total;
                }).catch(()=>{

                });

            },


            /*单行商机删除*/
            detbus(row){
                var a =[];
                a.splice(0,0,row);

                this.multipleTable = a;

                this.$confirm('此操作将删除该商机, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.truedetbus();
                    this.print("标志："+this.detflag);
                    if(!this.detflag){
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }else {
                        this.$confirm('该商机已包含合同！', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning',
                            center: true
                        })
                    }
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },

            /*跳转新增方法*/
            addbus(){
                this.$router.push({
                    path: "/addbusniess",
                });
            },

            /*确认删除*/
            truedetbus(){
                var list = JSON.stringify({budIdlist:this.multipleTable});
                this.print(list);
                this.$axios.post("http://localhost:8088/business/detbus",this.qs.stringify({
                    budId:list
                })).then(v=> {
                    this.detflag = v.data;
                    this.init();
                }).catch(() => {

                });
            },



            /*搜索商机名称图标方法*/
            selectbusname(){
                if(this.prosss.value==1){
                    this.init()
                }else{
                    this.allbusiness()
                }
            },
            /*搜索商机名称框blur方法*/
            selectbusname1(){
                if(this.prosss.value==1){
                    this.init()
                }else{
                    this.allbusiness()
                }
            },

            /*跳转详情方法*/
            todetails(rows){
                rows = escape(Crypto.set(rows.busId)); //加密数据
                this.$router.push({
                    path:'/details',
                    query: {
                        row:rows
                    }

                })
            },
            /*表格删除方法*/
            deleteRow(index, rows) {
                rows.splice(index, 1);
            },
            /*分页数方法*/
            handleSizeChange(val) {
                window.console.log(`每页 ${val} 条`);
                this.pagesize=val;

                if(this.prosss.value==1){
                    this.init()
                }else{
                    this.allbusiness()
                }
            },
            /*当前页方法*/
            handleCurrentChange(val) {
                window.console.log(`当前页: ${val}`);
                this.currentPage=val;
                if(this.prosss.value==1){
                    this.init()
                }else{
                    this.allbusiness()
                }
            },
            //复选框选中的
            handleSelectionChange(val) {
                this.multipleTable = val;//  this.multipleTable 选中的值
                if(this.multipleTable.length>0){
                    this.cjy=false;//第一行隐藏
                    this.cje=true;//批量操作栏出现
                }
                //选中项大于1不能执行添加跟进记录和修改按钮
                if(this.multipleTable.length>1){
                    this.isOne=false;
                }else if(this.multipleTable.length==0){//选中项为0时
                    this.cjy=true;//第一行出现
                    this.cje=false;//批量操作栏隐藏
                }else{
                    this.isOne=true;//添加跟进记录和修改出现
                }
                window.console.log(this.multipleTable);
            },

            topedit(){
                this.print(this.multipleTable)
                var busId=this.multipleTable[0].busId;
                this.editbus(busId);
            },

            /*选择类型商机方法*/
            changebusni(){
                if(this.busphaseoptions.phaseName!=''){
                    this.cjname=this.busphaseoptions.phaseName
                    this.seek=true;
                    if(this.prosss.value==1){
                        this.init()
                    }else{
                        this.allbusiness()
                    }
                }
            },
            /*解除选择类型商机方法*/
            cancelseek(){
                this.cjname='';
                this.busphaseoptions={
                    phaseId:0,
                    phaseName:'',
                };
                this.seek=false;
                if(this.prosss.value==1){
                    this.init()
                }else{
                    this.allbusiness()
                }
            },


            //批量下载表格前
            batchExportExcelBefore(){
                this.batchExportExcel(this.colData);
                this.multipleTable = [];
                if(this.prosss.value == 1) {
                    this.init();
                }else{//我可查看数据
                    this.allbusiness();
                }
            },
            //批量下载表格所有数据前
            batchAllExportExcelBefore() {
                this.multipleTable = this.buslist;
                this.batchExportExcel(this.colData);
                this.multipleTable = [];
                if(this.prosss.value == 1) {
                    this.init();
                }else{//我可查看数据
                    this.allbusiness();
                }
            },


            //批量下载表格 batchList
            batchExportExcel(tableDataColunm){
                this.multipleTable.forEach((item,i)=>{
                    this.$set(item,'linkmanName',item.busPrimarycontact.linkmanName);
                    this.$set(item,'linkmanMobile',item.busPrimarycontact.linkmanMobile);
                    this.$set(item,'clientName',item.client.clientName);
                    this.$set(item,'clientSite',item.client.clientSite);
                    this.$set(item,'phaseName',item.phase.phaseName);
                    this.$set(item,'busMoney',number_format(item.busMoney));
                    this.$set(item,'busWritten',formatTimeToStr(item.busWritten, 'yyyy-MM-dd hh:mm:ss'));
                    this.$set(item,'busSettime',formatTimeToStr(item.busSettime, 'yyyy-MM-dd hh:mm:ss'));

                    this.batchList.splice(i,0,item);
                }) //excel数据导出
                require.ensure([], () => {
                    const {
                        export_json_to_excel
                    } = require('../assets/Export2Excel.js');
                   /* const tHeader = ['商机编号','商机名称', '客户名称','联系人', '联系地址','联系号码','可能性','预签单日期', '预期金额','负责人','阶段','创建时间'];
                    const filterVal = ['busNo','busName', 'clientName','linkmanName','clientSite','linkmanMobile', 'busPossibility',
                        'busWritten', 'busMoney', 'busPeople','phaseName','busSettime'];*/
                    const tHeader = [];
                    const filterVal = [];
                    tableDataColunm.forEach((item)=>{
                        if(item.istrue){
                            this.tableInfo.forEach((val)=>{
                                if(item.title == val.name){
                                    tHeader.push(item.title);//表头
                                    filterVal.push(val.value);//表字段
                                }
                            })
                        }
                    })
                    const list = this.batchList;
                    const data = this.formatJson(filterVal, list);
                    export_json_to_excel(tHeader, data, '商机导出');

                    this.batchList = [];
                })
            },
            formatJson(filterVal, jsonData) {
                return jsonData.map(v => filterVal.map(j => v[j]))
            },

        },

        computed:{
            count(){
                return this.multipleTable.length
            },
            colcount(){
                return this.colOptions.length;
            }

        },
        created: function () {
            var storage = window.localStorage;
            this.mybutton = JSON.parse(storage.getItem("mybutton"));
            this.init();
            this.inphase();
        },
        watch:{

        },
        filters: {
            formatDate: function (time) {
                if (time != null && time != "") {
                    var date = new Date(time);
                    return formatTimeToStr(date, "yyyy-MM-dd");
                } else {
                    return "";
                }
            },
            formatMoney(val) {
                val = val.toString().replace(/\\$|\\,/g, "");
                if (isNaN(val)) {
                    val = "0";
                }
                let sign = (val == (val = Math.abs(val)));
                val = Math.floor(val * 100 + 0.50000000001);
                let cents = val % 100;
                val = Math.floor(val / 100).toString();
                if (cents < 10) {
                    cents = "0" + cents;
                }
                for (let i = 0; i < Math.floor((val.length - (1 + i)) / 3); i++) {
                    val = val.substring(0, val.length - (4 * i + 3)) + "," + val.substring(val.length - (4 * i + 3));
                }
                return (((sign) ? "" : "-") + val + "." + cents);
            }
        }
    }
    function number_format(number, decimals, dec_point, thousands_sep) {
        /*
            * 参数说明：
            * number：要格式化的数字
            * decimals：保留几位小数
            * dec_point：小数点符号
            * thousands_sep：千分位符号
            * */
        number = (number + '').replace(/[^0-9+-Ee.]/g, '');
        var n = !isFinite(+number) ? 0 : +number,
            prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
            sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
            dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
            s = '',
            toFixedFix = function (n, prec) {
                var k = Math.pow(10, prec);
                return '' + Math.floor(n * k) / k;
            };
        s = (prec ? toFixedFix(n, prec) : '' + Math.floor(n)).split('.');
        var re = /(-?\d+)(\d{3})/;
        console.log(s)
        while (re.test(s[0])) {
            s[0] = s[0].replace(re, "$1" + sep + "$2");
        }
        if ((s[1] || '').length < prec) {
            s[1] = s[1] || '';
            s[1] += new Array(prec - s[1].length + 1).join('0');
        }
        return s.join(dec);
    }
</script>

<style scoped>

    .addview:hover{
        color: white;
    }
    a{
         text-decoration: none;
         color: #409EFF;
     }
    a:hover{
        color: white;
    }
    .busin:hover{
        color: #3E84E9;
        cursor:pointer;
    }
    .businame{
        color: #606266;
    }
    .businame:hover{
        color: #409EFF;
        cursor:pointer;
    }
    .operate{
        font-size: 12px;
        height: 40px;
        padding: 0 20px;
        color: #777;
        background: white;
    }
    .selected—title{
        margin-top: 15px;
        margin-left: -6px;
        border-right: 1px solid #e6e6e6;
        width: 96px;
        height:20px;
        float: left;
    }
    .selected—title1{
        margin-top: 15px;
        border-right: 1px solid #e6e6e6;
        width: 86px;
        height:20px;
        float: left;
        cursor: pointer;
    }

    .selected—title1 span{
        margin-left: 24px;
    }
    .selected—title1 span:hover{
        color:#409eff;
    }
</style>